<!-- components/plus-btn/plus-btn.vue -->
<template>
	<view style="background-color: #f0f0f0; margin: 0 10rpx">
		<view class="plus-icon" @click="handleClick">
			<view class="plus-lines"></view>
		</view>
		<tki-tree ref="tkitree" :multiple="true" :range="data" :border="true" title="汇报给" rangeKey="name"
			@confirm="treeConfirm" @cancel="treeCancel"></tki-tree>
	</view>
</template>

<script>
	import tkiTree from '@/components/tki-tree/tki-tree.vue';
	import {
		sendUserTree
	} from '@/api/report/report';
	import {
		getUser
	} from '@/utils/auth';
	export default {
		name: 'PlusIcon',
		data() {
			return {
				data: []
			};
		},
		async mounted() {
			sendUserTree(getUser().userId).then((res) => {
				this.data = res.data;

			});
		},
		methods: {
			// 确定回调事件
			treeConfirm(e) {
				this.$emit('onSelect', e);
			},
			// 取消回调事件
			treeCancel(e) {
				this.$emit('onSelect', e);
			},
			// 显示树形选择器
			handleClick() {
				this.$refs.tkitree._show();
			}
		},
		components: {
			tkiTree
		}
	};
</script>

<style scoped>
	.plus-icon {
		position: relative;
		width: 24px;
		height: 24px;
		background: transparent;
		/* 原图背景应为白色，但需容器外设背景色才能显示 */
	}

	.plus-icon::before,
	.plus-icon::after {
		content: '';
		position: absolute;
		background: black;
		/* 符号颜色 */
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.plus-icon::before {
		width: 16px;
		/* 横线长度 */
		height: 2px;
		/* 线条粗细 */
	}

	.plus-icon::after {
		width: 2px;
		/* 竖线粗细 */
		height: 16px;
		/* 竖线长度 */
	}
</style>